import React from 'react';
import {inject, observer} from 'mobx-react';
import {Button, Row, Col, Modal, Spin, Tooltip} from 'antd';
import {
    WeaTab,
    WeaTop,
    WeaInput,
    WeaLocaleProvider,
    WeaLeftRightLayout,
    WeaSearchGroup,
    WeaFormItem,
    WeaBrowser,
    WeaSelect,
    WeaRightMenu,
    WeaPopoverHrm,
} from 'ecCom';
import {WeaTableNew} from "comsMobx";
import PersonTree from '../../public/persontree/PersonTree'
import {setWindowKeys} from '../../util/Util';

const getLabel = WeaLocaleProvider.getLabel;
const WeaTable = WeaTableNew.WeaTable;

/**
 * 绩效-待考核评分及审批列表
 * jiansong 2019/6/12
 */
@inject("accessAuditListStore")
@observer
export default class AccessAuditList extends React.Component {

    constructor(props) {
        super(props);
        //tab操作后更新列表数据
        window.RefreshAccessAuditList = () => {
            this.props.accessAuditListStore.tableStore.reloadCurrent();
            this.props.accessAuditListStore.getAccessCount();
            this.props.updateNum();
        }
        this.state = {
            selectedRowKeys: [], //选中行
            showLeft: false, //是否显示左侧栏
            collectParams: {
                favname: getLabel(506162, "考核评分"),
                favouritetype: "5",
                link: '/spa/workrelate/static/index.html#/main/workrelate/performance/performanceIndex?menutype=2&showtype=1',
                importantlevel: 1,
            }
        };
        this.rowSelection = {selectedRowKeys: this.state.selectedRowKeys,
            onChange: this.onSelectChange};
        this.store = this.props.accessAuditListStore;
    }

    componentWillMount() {
        setWindowKeys(2, getLabel(506162, "考核评分"));
        this.store.doInit();
    }

    componentWillUnmount() {
        window.RefreshAccessAuditList = null
    }

    render() {
        const {typeData, loading, tableStore, onSearchChange, queryParams, getAccessAuditListData, setShowSearchAd, showSearchAd,newcount} = this.store;
        const {selectedRowKeys, collectParams} = this.state;
        let menu = [{
            key: '0',
            icon: <i className='icon-coms-search'/>,
            content: getLabel(388113, '搜索'),
            onClick: getAccessAuditListData,
        }];
        if (queryParams.showtype === "2") {
            menu = menu.concat(
                [{
                    key: '1',
                    icon: <i className='icon-coms-Approval'/>,
                    content: getLabel('142', '批准'),
                    onClick: () => this.auditBatch("quick_approve"),
                    disabled: selectedRowKeys.length == 0
                }, {
                    key: '2',
                    icon: <i className="icon-coms-go-back" />,
                    content: getLabel('236', '退回'),
                    onClick: () => this.auditBatch("quick_return"),
                    disabled: selectedRowKeys.length == 0
                }, {
                    key: '3',
                    icon: <i className='icon-coms-Approval'/>,
                    content: getLabel('508658', '批准全部'),
                    onClick: () => this.doAuditAll('all_approve'),
                }, {
                    key: '4',
                    icon: <i className="icon-coms-go-back" />,
                    content: getLabel('508660', '退回全部'),
                    onClick: () => this.doAuditAll('all_return'),
                }]
            );
        }
        menu.push({
            key: '10',
            icon: <i className="icon-coms-Custom"/>,
            content: getLabel('32535', '显示列定制'),
            onClick: this.showColumn,
        });
        return (
            <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@jqhgxa`} spinning={loading}>
                <div style={{height: "100vh"}}>
                    <WeaPopoverHrm ecId={`${this && this.props && this.props.ecId || ''}_WeaPopoverHrm@6gqe0h`}/>
                    <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@wmo13d`} datas={menu} collectParams={collectParams} showUrlItem={false}>
                        <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@vxblr0`}
                            title={getLabel('508661', '待考核评分及审批列表')}
                            icon={<i className='icon-coms-implement'/>}
                            iconBgcolor='rgb(150, 53, 138)'
                            buttons={[
                                (this.condition()),
                            ]}
                            showDropIcon={true}
                            dropMenuDatas={menu}
                        />
                        <WeaLeftRightLayout ecId={`${this && this.props && this.props.ecId || ''}_WeaLeftRightLayout@x7djbi`}
                            isNew={true}
                            showLeft={true}
                            leftWidth={220}
                            leftCom={
                                <PersonTree ecId={`${this && this.props && this.props.ecId || ''}_PersonTree@sv40cg`}
                                    onPersonClick={this.onPersonClick}
                                    treeNodeClick={this.treeNodeClick}
                                />}
                            showLeft={this.state.showLeft}
                            onCollapse={showLeft => this.setState({showLeft})}
                        >
                            <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@0tltx0`}
                                datas={typeData}
                                searchType={["advanced", "base"]}
                                showSearchAd={showSearchAd}
                                keyParam="viewcondition" //主键
                                countParam="groupid" //数量
                                counts={newcount}
                                selectedKey={queryParams.showtype}
                                onChange={val => {
                                    onSearchChange({'showtype': val});
                                    getAccessAuditListData();
                                }}
                                setShowSearchAd={bool => setShowSearchAd(bool)}
                                buttonsAd={this.getTabButtonsAd(this.props.ecId || '')}
                                hideSearchAd={() => setShowSearchAd(false)}
                                searchsAd={this.getSearchsAd()}
                                searchsBaseValue={queryParams.scorename}
                                onSearch={getAccessAuditListData}
                                onSearchChange={(val) => onSearchChange({'scorename': val})}
                            />
                            <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@jn9mss`}
                                comsWeaTableStore={tableStore}
                                hasOrder
                                needScroll
                                rowSelection={this.rowSelection}
                                onOperatesClick={this.onOperatesClick} //右键菜单操作
                            />
                        </WeaLeftRightLayout>
                    </WeaRightMenu>
                </div>
            </Spin>
        )
    }

    //显示列定制
    showColumn = () => {
        const {tableStore} = this.store;
        tableStore.setColSetVisible(true);
        tableStore.tableColSet(true);
    };

    //点击节点
    treeNodeClick = (event, ids, selectedKeys, nodes) => {
        let {getAccessAuditListData, onSearchChange} = this.store;
        let {name, type, id} = nodes[0];
        switch (type) {
            case '3':
                onSearchChange({
                    'hrmids': id,
                    'hrmnames': name,
                    'departmentids': null,
                    'departmentnames': null,
                    'subcompanyids': null,
                    'subcompanynames': null
                });
                break;
            case '2':
                onSearchChange({
                    'hrmids': null,
                    'hrmnames': null,
                    'departmentids': id,
                    'departmentnames': name,
                    'subcompanyids': null,
                    'subcompanynames': null
                });
                break;
            case '1':
                onSearchChange({
                    'hrmids': null,
                    'hrmnames': null,
                    'departmentids': null,
                    'departmentnames': null,
                    'subcompanyids': id,
                    'subcompanynames': name
                });
                break;
        }
        if (type != '0') {
            getAccessAuditListData();
        }
    }

    //点击人员
    onPersonClick = (hrmId, hrmname) => {
        let {getAccessAuditListData, onSearchChange} = this.store;
        onSearchChange({
            'hrmids': hrmId,
            'hrmnames': hrmname,
            'departmentids': null,
            'departmentnames': null,
            'subcompanyids': null,
            'subcompanynames': null
        });
        getAccessAuditListData();
    }

    onSelectChange = (selectedRowKeys) => {
        this.setState({selectedRowKeys})
    };

    //批准或退回已选
    auditBatch = (operation) => {
        let message = operation == 'quick_approve' ? getLabel('508662', '确认批准已选考核结果') : getLabel('508663', '确认退回已选考核结果');
        let {selectedRowKeys} = this.state
        if (selectedRowKeys.length > 0) {
            Modal.confirm({
                title: getLabel('386786', '信息确认'),
                content: message + '?',
                onOk: () => {
                    let params = {
                        scoreids: selectedRowKeys,
                        operation: operation,
                    };
                    this.store.accessAuditOperation(params, this.props.updateNum);
                    this.setState({
                        selectedRowKeys: []
                    })
                },
            });
        } else {
            Modal.warning({
                title: getLabel('15804', '系统信息'),
                content: getLabel('501159', '请选择要操作的数据')
            });
        }
    }

    //批准或退回全部
    doAuditAll = (operation) => {
        let message = operation == 'all_approve' ? getLabel('508664', '确定批准满足当前查询条件的全部考核结果') : getLabel('508665', '确定退回满足当前查询条件的全部考核结果');
        Modal.confirm({
            title: getLabel('386786', '信息确认'),
            content: message + '?',
            onOk: () => {
                this.store.accessAuditOperationAll(operation, this.props.updateNum);
                this.setState({
                    selectedRowKeys: []
                })
            },
        });
    };

    //表格每行右侧菜单
    onOperatesClick = (record, index, operate, flag)=> {
        let message, operation;
        if (operate.index === "2" || operate.index === "3") {
            window.open("/spa/workrelate/static/index.html#/main/workrelate/performance/accessView?scoreid=" + record.id);
        } else {
            if (operate.index === '0') {
                //批准
                message = getLabel('508666', '确定批准此考核结果');
                operation = 'approve'
            } else if (operate.index === '1') {
                //退回
                message = getLabel('508667', '确定退回此考核结果');
                operation = 'return'
            }
            let params = {
                scoreid: record.id,
                operation: operation,
            };
            Modal.confirm({
                title: getLabel('386786', '信息确认'),
                content: message + '?',
                onOk: () => {
                    this.store.accessAuditOperation(params, this.props.updateNum);
                },
            });
        }
    }

    //考核方案未设置提醒
    condition() {
        const {selectedRowKeys} = this.state;
        const {showtype} = this.store.queryParams;
        const {accessAuditListStore: {amount1, amount2, amount3, amount4}} = this.props;
        if (amount1 > 0 || amount2 > 0 || amount3 > 0 || amount4 > 0) {
            return (
                <div>
                    <a href='javascript:void(0)'
                       onClick={() => window.open("/spa/workrelate/static/index.html#/main/workrelate/performance/programIndex?type=3")}>{getLabel('509098', '考核方案未设置提示')}</a>（
                    {amount1 > 0 && (
                        <span>{getLabel('17138', '年度')}：
                            <a href='javascript:void(0)'
                               onClick={() => window.open("/spa/workrelate/static/index.html#/main/workrelate/performance/programIndex?queryType=nofyear")}>{amount1}</a>
                        </span>)
                    }
                    {amount2 > 0 && (
                        <span style={{marginLeft: "5px"}}>{getLabel('20729', '半年')}：
                            <a href='javascript:void(0)'
                               onClick={() => window.open("/spa/workrelate/static/index.html#/main/workrelate/performance/programIndex?queryType=nohyear")}>{amount2}</a>
                        </span>)
                    }
                    {amount3 > 0 && (
                        <span style={{marginLeft: "5px"}}>{getLabel('17495', '季度')}：
                            <a href='javascript:void(0)'
                               onClick={() => window.open("/spa/workrelate/static/index.html#/main/workrelate/performance/programIndex?queryType=noquarter")}>{amount3}</a>
                        </span>)
                    }
                    {amount4 > 0 && (
                        <span style={{marginLeft: "5px"}}>{getLabel('19398', '月度')}：
                            <a href='javascript:void(0)'
                               onClick={() => window.open("/spa/workrelate/static/index.html#/main/workrelate/performance/programIndex?queryType=nomonth")}>{amount4}</a>
                        </span>)
                    }
                    {(<span>）</span>)}
                    {
                        showtype == '2' &&
                        <span>
                            <span style={{marginLeft: '10px'}}>
                                <Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@zf8uyu`} title={getLabel('508656', '批准已选')}><Button ecId={`${this && this.props && this.props.ecId || ''}_Button@2c32sc`} type='primary'
                                                                                    disabled={selectedRowKeys.length == 0}
                                                                                    onClick={() => this.auditBatch("quick_approve")}>{getLabel('142', '批准')}</Button></Tooltip>
                            </span>
                            <span style={{marginLeft: '10px'}}>
                                <Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@ygpc78`} title={getLabel('508657', '退回已选')}><Button ecId={`${this && this.props && this.props.ecId || ''}_Button@6htl1v`} type='primary'
                                                                                    disabled={selectedRowKeys.length == 0}
                                                                                    onClick={() => this.auditBatch("quick_return")}>{getLabel('236', '退回')}</Button></Tooltip>
                            </span>
                        </span>
                    }

                </div>
            )
        }
    }

    //高级搜索条目
    getSearchsAd() {
        let {cicleData, showstatusData, includesubData, includedeptData, queryParams, doSearch, onSearchChange, hrmData, subcompanyData, departmentData} = this.store
        let items = [];
        items.push({
            com:
                <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@lnvzo7@scorename`} label={getLabel('24986', '标题')} ratio1to2>
                    <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@g5fwo8@scorename`}
                        value={queryParams.scorename}
                        onChange={(val) => onSearchChange({'scorename': val})}
                        onPressEnter={doSearch}
                    />
                </WeaFormItem>
        });
        items.push({
            com:
                <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@jfyqlj@type1`} label={getLabel('15386', '周期')} ratio1to2>
                    <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@2mm53f@type1`}
                        value={queryParams.type1}
                        options={cicleData}
                        onChange={(val) => onSearchChange({'type1': val})}
                    />
                </WeaFormItem>
        });
        queryParams.showtype == 1 && items.push({
            com:
                <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@7q4wzw@showstatus`} label={getLabel(23247, '状态')} ratio1to2>
                    <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@jtj5h3@showstatus`}
                        value={queryParams.showstatus}
                        options={showstatusData}
                        onChange={(val) => onSearchChange({'showstatus': val})}
                    />
                </WeaFormItem>
        });
        items.push({
            com:
                <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@miqex0@person`} label={getLabel('30042', '人员')} ratio1to2>
                    <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@99jnm6@person`}
                        type={17}
                        isSingle={false}
                        title={getLabel('179', '人力资源')}
                        replaceDatas={hrmData}
                        onChange={(ids, names) => onSearchChange({'hrmids': ids, 'hrmnames': names})}
                    />
                </WeaFormItem>
        });
        items.push({
            com:
                <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@sk81up@includesub`} label={getLabel(33553, '分部')} ratio1to2>
                    <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@odbj12@includesub`}>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@c5qv5i@includesub`} span={8}>
                            <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@wp42d5@includesub`}
                                value={queryParams.includesub}
                                options={includesubData}
                                onChange={(val) => onSearchChange({'includesub': val})}
                            />
                        </Col>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@l4vxls@subdata`} span={15} offset={1}>
                            <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@iazmh4@subdata`}
                                type={164}
                                title={getLabel(33553, '分部')}
                                icon="icon-coms-hrm"
                                replaceDatas={subcompanyData}
                                onChange={(ids, names) => onSearchChange({
                                    'subcompanyids': ids,
                                    'subcompanynames': names
                                })}
                            />
                        </Col>
                    </Row>
                </WeaFormItem>
        });
        items.push({
            com:
                <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@h7pwr2@includedept`} label={getLabel(27511, '部门')} ratio1to2>
                    <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@jw2hzp@includedept`}>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@mhqlvv@includedept`} span={8}>
                            <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@6hs85n@includedept`}
                                value={queryParams.includedept}
                                options={includedeptData}
                                onChange={(val) => onSearchChange({'includedept': val})}
                            />
                        </Col>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@35bzrk@deptdata`} span={15} offset={1}>
                            <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@0gu8qr@deptdata`}
                                type={4}
                                title={getLabel(27511, '部门')}
                                icon="icon-coms-hrm"
                                replaceDatas={departmentData}
                                onChange={(ids, names) => onSearchChange({
                                    'departmentids': ids,
                                    'departmentnames': names
                                })}
                            />
                        </Col>
                    </Row>
                </WeaFormItem>
        });
        return <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@fi4iq7`} title={getLabel(32905, '常用条件')} items={items} showGroup={true} col={2}/>
    }

    //高级搜索框按钮
    getTabButtonsAd(ecId) {
        const {doSearch, resetSearchAd, setShowSearchAd} = this.store;
        return [
            (<Button ecId={`${ecId}_Button@pwi5m2@search`} type="primary" onClick={doSearch}>{getLabel(388113, '搜索')}</Button>),
            (<Button ecId={`${ecId}_Button@cfr63t@reset`} type="ghost" onClick={resetSearchAd}>{getLabel(2022, '重置')}</Button>),
            (<Button ecId={`${ecId}_Button@eo7zgw@cancel`} type="ghost" onClick={() => setShowSearchAd(false)}>{getLabel(31129, '取消')}</Button>)
        ]
    }

};